<template>
  <div class="article-box" style="overflow: auto; height: calc(100vh - 60px)">
    <header class="article-bg">
      <div class="article-crumbs">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">系统设置</el-breadcrumb-item>
          <el-breadcrumb-item
            class="text-regular"
            :to="{ path: '/content/product' }"
            >内容管理</el-breadcrumb-item
          >
          <el-breadcrumb-item
            class="text-regular"
            :to="{ path: '/content/product' }"
            >产品管理</el-breadcrumb-item
          >
          <el-breadcrumb-item class="text-regular">{{
            isEditor == 1 ? "编辑产品" : "新增产品"
          }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </header>
    <el-container class="article-container" style>
      <el-header style="height: 32px">
        <div class="article-head">
          <div class="article-headTitle">
            {{ isEditor == 1 ? "编辑产品" : "新增产品" }}
          </div>
          <div class="article-btn">
            <button
              class="cl-button cl-button--small cl-button--primary_notbg"
              @click="_handleGoBack"
            >
              返回
            </button>

            <button
              class="cl-button cl-button--small cl-button--primary"
              @click="editAdd"
            >
              保存
            </button>
          </div>
        </div>
      </el-header>
      <div class="domain-menu">
        <el-tab-pane label="产品信息" name="product"></el-tab-pane>
      </div>
      <el-main style="overflow: hidden">
        <div class="articleContent">
          <div class="articleContentLeft">
            <leftContent ref="articleContent" :productDetail="productDetail" />
          </div>
          <div class="articleContentRight">
            <RightContent
              ref="articleRight"
              :productDetail="productDetail"
              :attributeIds="attributeIds"
            />
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import * as productManageApi from "@/api/request/productManageApi";
import RightContent from "./content-detail/RightContent";
import leftContent from "./content-detail/LeftContent";
export default {
  components: {
    leftContent,
    RightContent,
  },
  props: {},
  data() {
    return {
      attributeIds: [],
      productDetail: {
        productId: null,
        productCode: "",
        productName: "",
        summary: "",
        description: "",
        imageUrl: "",
        status: null,
        categoryId: null,
        price: null,
        platformCode: "",
        regionId: "",
        productLevel: null,
        attributeIds: [],
      },
    };
  },

  created() {},
  methods: {
    _handleGoBack() {
      this.$router.push("/product/productmanage");
    },
    async editAdd() {
      this.productDetail.price = Number(this.productDetail.price);
      if (this.isEditor) {
        let { status, data } = await productManageApi.putEdit(
          this.productDetail
        );
        if (status === 200) {
          this.$notify({
            customClass: "notify-success", //  notify-success ||  notify-error
            message: `编辑成功!`,
            showClose: false,
            duration: 1000,
          });
          this._handleGoBack();
        } else {
          this.$notify({
            customClass: "notify-error", //  notify-success ||  notify-error
            message: `编辑失败!`,
            showClose: false,
            duration: 1000,
          });
        }
      } else {
        await productManageApi.postCreate(this.productDetail).catch((i) => {
          if (i.status === 201) {
            this.$notify({
              customClass: "notify-success", //  notify-success ||  notify-error
              message: `新建成功!`,
              showClose: false,
              duration: 1000,
            });
            this._handleGoBack();
          } else {
            this.$notify({
              customClass: "notify-error", //  notify-success ||  notify-error
              message: `新建失败!`,
              showClose: false,
              duration: 1000,
            });
          }
        });
      }
    },
    /**
     * 打开编辑
     */
    async productEdit(id) {
      this.$Loading.show();
      let { data } = await productManageApi.getDetail(id);
      this.productDetail.productId = data.id;
      this.productDetail.productCode = data.productCode;
      this.productDetail.productName = data.productName;
      this.productDetail.summary = data.summary;
      this.productDetail.description = data.description;
      this.productDetail.imageUrl = data.imageUrl;
      this.productDetail.status = data.status;
      this.productDetail.categoryId = data.categoryId;
      this.productDetail.price = data.price;
      this.productDetail.platformCode = data.platformCode;
      this.productDetail.regionId = data.regionId;
      this.productDetail.productLevel = data.productLevel;
      data.attributes.forEach((i) => {
        this.productDetail.attributeIds.push(i.attributeName);
      });
      this.$Loading.hide();
    },
  },
  mounted() {
    var id = this.$route.query.id;
    if (id != null || id != undefined) {
      this.productEdit(id);
    }
  },
  computed: {
    isEditor() {
      return this.$route.query.isEditor;
    },
  },
};
</script>

<style lang="scss" scoped>
.article-crumbs /deep/ .el-breadcrumb__item {
  .el-breadcrumb__inner {
    font-weight: 400;
    color: #262626;
    font-size: $--font-size-small;
  }
  .el-breadcrumb__separator {
    color: $--color-text-regular;
  }
}
.article-crumbs /deep/ .text-regular {
  .el-breadcrumb__inner {
    color: $--color-text-regular;
  }
}
</style>
<style lang="scss" scoped>
.article-box {
  background: #f9fafc;
}
.article-bg {
  width: 100%;
  height: 170px;
  background: url("~img/content-icon/content-detaiBg.png") no-repeat center;
  overflow: hidden;
  background-size: cover;
  .article-crumbs {
    width: 80%;
    margin: 0 32px;
    padding-top: 15px;
  }
}
.article-container {
  width: 100%;
  margin-top: -115px;
  // margin-left: -40px;
}
.article-head {
  margin: 0 10%;
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .article-headTitle {
    font-size: 16px;
    font-weight: 500;
    color: $--color-text-primary;
  }
}
.articleContent {
  margin: 0 10%;
  width: 80%;
  display: flex;
  .articleContentLeft {
    width: calc(100% - 361px);
    display: inline-block;
  }
  .articleContentRight {
    width: 345px;
    display: inline-block;
    padding-left: 16px;
  }
}
.storeContent {
  margin: 0 10%;
  width: 80%;
  border: $--border-base;
  background: $--color-white;
}
.domain-menu {
  position: relative;
  height: 50px;
  background: $--color-white;
  border-radius: $--border-radius-base;
  border: $--border-base;
  width: 80%;
  margin: 16px 10%;
  .cl-button {
    position: absolute;
    right: 16px;
    top: 9px;
  }
}
.domain-menu /deep/ .el-tabs__nav-wrap::after {
  height: 0;
}
.domain-menu /deep/ .el-tabs__active-bar.is-top {
  width: 0 !important;
}
.el-tabs /deep/ .el-tabs__item {
  height: 50px;
  line-height: 50px;
  margin: 0 24px;
  padding: 0;
  color: $--color-text-primary;
}
.el-tabs /deep/ .el-tabs__item.is-active {
  border-bottom: 2px solid $--color-primary;
}
</style>
